<style>
    .demo-theme-color-item {
        display: table-cell;
        width: 36px;
        height: 36px;
        vertical-align: top;
        text-align: center;
        color: white;
        cursor: pointer;
    }

        .demo-theme-color-item .material-icons {
            display: flex;
            height: 100%;
            align-items: center;
            justify-content: center;
        }

        .demo-theme-color-item.selected { /* border: 1px solid black; */
        }
</style>
<div>
    @foreach ( var color in ThemeColors.Items.Values )
    {
        <div>
            @foreach ( var shade in color.Shades.Values )
            {
                <div class="demo-theme-color-item" style="background: @(shade.Value)" @onclick="@(()=>Value=shade.Value)">

                </div>
            }
        </div>
    }
</div>
@code{
    [Parameter]
    public string Value
    {
        get => _value;
        set
        {
            if ( value == _value )
            {
                return;
            }
            _value = value;
            this.StateHasChanged();
            ValueChanged.InvokeAsync( value );
        }
    }

    [Parameter]
    public EventCallback<string> ValueChanged { get; set; }

    private string _value;
}